<template>
    <div>
        <button @click="handlerGetNode">获取节点</button>
        <input type="text" id="inputNode" ref="inputref">
        <button @click="handlerGetChild">获取子组件的内容</button>
        <Child ref="childref"></Child>

    </div>
</template>

<script>
import Child from "./Child.vue"
    /**
     * 利用refs   获取dom节点 
     *            获取子组件
     */
export default {
    components:{
        Child
    },

    methods:{
        handlerGetNode() {
            // 通过原生dom 获取节点的方式  官网不推荐使用
            // const inputNode =  document.querySelector("#inputNode")
            // console.dir(inputNode);
            // console.dir(inputNode.value);
            console.dir(this.$refs.inputref);
            console.dir(this.$refs.inputref.value);
        },
        handlerGetChild() {
            // console.dir(this.$refs);
            const msg = this.$refs.childref.msg
            console.log(msg);
        }
    }
};
</script>

<style>

</style>
